<template>
  <div id="container"></div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getList } from "../common/api";
// import { list } from '../common/config'
const list = ref([]);
let map = null;
let AMap = null;
const initData = async () => {
  const res = await getList();
  list.value = res.data || [];
  let initPoint;
  if (list.value.length > 0) {
    initPoint = list.value[0];
  } else {
    initPoint = {
      centerGpsLon: 116.397455,
      centerGpsLat: 39.909187,
    };
  }
  AMap = await AMapLoader.load({
    key: "bdcb9e7872354cfc0acba72736bdae32", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  });

  map = new AMap.Map("container", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 16, // 初始化地图级别
    center: [initPoint.centerGpsLon, initPoint.centerGpsLat], // 初始化地图中心点位置
  });
  ininMarker();
};

const ininMarker = () => {
  list.value.map((x) => {
    const _marker = new AMap.Marker({
      position: [x.centerGpsLon, x.centerGpsLat],
    });
    map.add(_marker);
  });
};

onMounted(() => {
  initData();
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 70vh;
}
</style>
